<template>
  <div class="detailInfo">
    <div class="detailInfo-exampleImg" @click="showImgList()">
      <div class="detailInfo-exampleImg-count">
        <i class="iconfont bottom-foot-icon">&#xe604;</i>&nbsp;{{imgCount}}
      </div>
      <img src="http://img1.qunarzz.com/sight/p0/1412/ad/02e245cc8b980dbd11e171ce9db9a8c7.water.jpg_800x800_a615e072.jpg">
    </div>
    <div class="detailInfo-imgList" v-if="isShow">
      <div class="detailInfo-imgList-swiper">
        <div class="detailInfo-imgList-del" @click="hideImgList()"><i class="iconfont bottom-foot-icon">&#xe607;</i></div>
        <swiper :options="swiperOption"  ref="mySwiper">
          <!-- 这部分放你要渲染的那些内容 -->
          <swiper-slide v-for="item in hotelInfo">
            <img v-bind:src="item.imgUrl">
          </swiper-slide>
          <!-- 这是轮播的小圆点 -->
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
    </div>
    <div class="detailInfo-score">
      <i class="iconfont iColor">&#xe600;</i>
      <i class="iconfont iColor">&#xe600;</i>
      <i class="iconfont iColor">&#xe600;</i>
      <i class="iconfont iColor">&#xe600;</i>
      <i class="iconfont iColor">&#xe600;</i>
      <span class="iColor">5分</span>
      <span class="detailInfo-score-comment">288条评论<i class="iconfont">&#xe612;</i></span>
    </div>
    <div class="detailInfo-location">
      <i class="iconfont">&#xe884;</i>
      <span class="detailInfo-location-text">海城区茶亭路27号海滨公园内（近北海第二汽车站）</span>
    </div>
    <div class="detailInfo-price">
      <span class="detailInfo-price-span">成人<span>￥288</span></span>
      <span class="detailInfo-price-span">小孩<span>￥108</span></span>
    </div>
    <div class="detailInfo-des">
      <p>1. 涠洲岛的船票因为季节而不定。所以上岛前了解好天气是有必要的。</p>
      <p>2. 涠洲岛上没有ATM和银行，只有农村信用社。所以如果要上岛，先取好钱。</p>
      <p>3. 北海吃海鲜，距离海边越远就越便宜。一定不要去司机或者海边招揽生意人带过去的餐厅，会被宰被骗。</p>
      <p>4. 去到无人的海滩时，常会有老人在路旁乱收费。虽然每人10元也不多，但一定要抵制这种行为。</p>
      <p>5. 防晒霜切记不要忘带。</p>
      <p>6. 打车时不要去司机拉到的住处或者餐厅，会被宰很多。</p>
    </div>
    <bottom></bottom>
  </div>
</template>

<script>
  import bottom  from '../components/bottom.vue';
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  export default {
    name: '景点',
    components:{
      'swiper':swiper,
      'swiperSlide':swiperSlide,
      'bottom' :　bottom
    },
    methods:{
      showImgList(){
         this.isShow = true;
      },
      hideImgList(){
         this.isShow = false;
      }
    },
    data () {
      return {
        isShow : false,
        imgCount:6,
        swiperOption: {
          //是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
          notNextTick: true,
          pagination: '.swiper-pagination',
          slidesPerView: 'auto',
          centeredSlides: true,
          paginationClickable: true,
          spaceBetween: 30,
          onSlideChangeEnd: swiper => {
            //这个位置放swiper的回调方法
            this.page = swiper.realIndex+1;
            this.index = swiper.realIndex;
          }
        },
      hotelInfo:[
          {imgUrl:'http://img1.qunarzz.com/sight/p0/1412/4e/3b9b94cf390225fd5e47a54073fe6115.water.jpg_800x800_8d719789.jpg',name:'世界之窗',price:'128',address:'288人消费',score:'4.8',commentNum:'150'},
          {imgUrl:'http://img1.qunarzz.com/sight/p0/1412/7d/75ff75dfb107b27279bbaaa3fd12bcc7.water.jpg_800x800_6a7491a4.jpg',name:'海底世界',price:'138',address:'288人消费',score:'4.8',commentNum:'150'},
          {imgUrl:'http://img1.qunarzz.com/sight/p0/1412/9d/e528ef2006f16e104cdd9ca6d2e0e8ba.water.jpg_800x800_217a254b.jpg',name:'欢乐谷',price:'148',address:'288人消费',score:'4.8',commentNum:'150'},
          {imgUrl:'http://img1.qunarzz.com/sight/p0/1412/17/f7566a9a379a5e4e0f54bcf61524b2d3.water.jpg_800x800_1035511c.jpg',name:'涠洲岛',price:'158',address:'288人消费',score:'4.8',commentNum:'150'},
          {imgUrl:'http://img1.qunarzz.com/sight/p0/1412/84/62bc063c27bdc1543d1fcaeebfb46432.water.jpg_800x800_332ff8a8.jpg',name:'环岛游',price:'168',address:'288人消费',score:'4.8',commentNum:'150'},
          {imgUrl:'http://img1.qunarzz.com/sight/p0/1412/ca/b5919f78471cae77d152e62f61933e89.water.jpg_800x800_03b6420d.jpg',name:'野人谷',price:'178',address:'288人消费',score:'4.8',commentNum:'150'},
          {imgUrl:'http://img1.qunarzz.com/sight/p0/1412/ad/02e245cc8b980dbd11e171ce9db9a8c7.water.jpg_800x800_a615e072.jpg',name:'银滩',price:'188',address:'288人消费',score:'4.8',commentNum:'150'},
        ]
      }
    },
    //定义这个sweiper对象
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper;
      }
    },
    mounted () {
      //这边就可以使用swiper这个对象去使用swiper官网中的那些方法
      this.swiper.slideTo(0, 0, false);
    }
  }
</script>

<style lang="scss" scoped>
  @import "../commomCss/comomCss";
  .detailInfo{
    .detailInfo-exampleImg{
      position: relative;
      .detailInfo-exampleImg-count{
        width: torem(40px);
        height: torem(20px);
        background: rgba(0,0,0,.5);
        border-radius:torem(5px);
        font-size: torem(15px);
        color: #fff;
        line-height:torem(20px);
        text-align: center;
        position: absolute;
        bottom: (30px);
        right: torem(30px);
      }
      img{
        width: 100%;
        height: torem(200px);
      }
    }
    .detailInfo-imgList{
      overflow: hidden;
      position: fixed;
      z-index: 99;
      top: 0;
      bottom: 0;
      width: 100%;
      left: 0px;
      background-color: #000;
      .detailInfo-imgList-del{
        position: absolute;
        top: torem(20px);
        right: torem(20px);
        i{
          color: white;
          font-size: torem(25px);
        }
      }
      .detailInfo-imgList-swiper{
        margin: torem(100px) auto;
        top: 50%;
        img{
          width: 100%;
        }
      }
    },
    .detailInfo-score{
      position: relative;
      .iColor{
        display: inline-block;
        font-size: torem(16px);
        color: #00bcd4;
      }
      .detailInfo-score-comment{
        position: absolute;
        bottom:0;
        right: 0;
        font-size: torem(16px);
      }
    }
    .detailInfo-location{
      margin: torem(5px);
      i{
        font-size: torem(25px);
      }
      .detailInfo-location-text{
        display: inline-block;
        margin-top: torem(5px);
        font-size: torem(16px);
        width: 90%;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    }
    .detailInfo-price{
      margin: torem(5px);
      font-size: torem(16px);
      .detailInfo-price-span{
        span{
          color: #00bcd4;
        }
      }
    }
    .detailInfo-des{
      word-break: break-all;
      word-wrap: break-word;
      line-height:torem(20px);
      color: #616161;
      p{
        font-size: torem(16px);
      }
    }
  }

</style>
